<template>
    <div class="main_container">
        <el-form :model="params" label-width="auto">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="批次">
                        <el-select style="width: 200px;" v-model="params.batch_id" placeholder="请选择" clearable>
                            <el-option v-for="item in batchList" :key="'pay_'+item.id" 
                                :label="item.batch_name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品名称">
                        <el-select v-model="params.goods_id" filterable remote placeholder="输入商品名称"
                            :remote-method="searchProducts" style="width: 200px">
                            <el-option
                                v-for="item in searchGoods"
                                :key="'prod_'+item.id"
                                :disabled="item.disabled"
                                :label="item.name"
                                :value="item.id">
                                    <div style="display: flex;align-items: center;width: 600px;">
                                        <span style="width: 30%;text-align: center;">{{ item.name }}</span>
                                        <span style="width: 20%;text-align: center;">{{ item.goods_no }}</span>
                                        <span style="width: 30%;text-align: center;">{{ item.barcode }}</span>
                                        <span style="width: 20%;text-align: center;">{{ item.current_inventory_quantity }}</span>
                                    </div>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="关键词">
                        <el-input style="width: 200px;" maxlength="100" v-model="params.search_str" placeholder="商品名称/商品编号/规格" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <div style="display: flex;align-items: center;justify-content: end;padding-right: 20px;">
                        <el-button size="small" icon="el-icon-search" @click="handleQuery"
                            style="margin-top: 0px;" class="btn_primary_color">查询</el-button>

                        <div style="display: flex;align-items: center;margin-left: 20px;" @click="showMore=!showMore">
                            <span style="font-size: 14px;color: #606266;width: auto;cursor: pointer;margin-right: 5px;">
                                {{ showMore? '收起' : '展开' }}
                            </span>
                            <i :class="showMore?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="showMore">
                <el-col :span="6">
                    <el-form-item label="商品分类">
                        <el-cascader
                            v-model="selectCates"
                            :options="categorys"
                            :show-all-levels="false"
                            :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                            @change='itemChanged'
                            style="width: 200px;"
                            clearable>
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="隐藏停用商品">
                        <el-select style="width: 200px;" v-model="params.hidden_inactive_goods" placeholder="请选择" clearable>
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table border :data="productList" :max-height="tableHeight" style="margin-top: 15px;">
            <el-table-column label="序号" width="100" align="center" prop="index" />
            <el-table-column label="商品名称" header-align="center" align="left" prop="prod_name" />
            <el-table-column label="商品编号" align="center" prop="goods_no" />
            <!-- <el-table-column label="商品分类" align="center" prop="cateName" /> -->
            <el-table-column label="单位" width="100" align="center" prop="unitName" />
            <el-table-column label="批次" align="center" prop="batch_name" />
            <el-table-column label="库存" align="center" prop="stock" />
        </el-table>
        <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="getProductLists"
            @current-change="getProductLists"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getBatchList, queryBatch, listProduct, getTreeList } from '@/api/product';
export default {
    name: 'batchQuery',
    data() {
        return {
            showMore: false,
            params: {
                corp: '',
                goods_id: '',
                search_str: '',
                category_one_level: '',
                category_two_level: '',
                batch_id: '',
                hidden_inactive_goods: 0
            },
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            tableHeight: 420,
            categorys: [],
            selectCates: [],
            batchList: [],
            searchGoods: [],
            productList: []
        }
    },
    created() {
        if (window.innerHeight > 1000) {
            this.tableHeight = window.innerHeight - 400
        }
        this.params.corp = this.$store.state.corpId
        this.getBatchLists()
        this.getProductCategory()
        this.handleQuery()
    },
    methods: {
        getBatchLists() {
            getBatchList({corp: this.params.corp}).then(res => {
                this.batchList = res.data.data.data_list
            })
        },
        // 获取商品分类
        getProductCategory() {
            let that = this
            getTreeList({corp: this.params.corp}).then(res => {
                let categorys = res.data.data.category_list.filter(item => { return !item.parent })
                that.categorys = categorys

                that.cateLists = []
                res.data.data.category_list.forEach(item => {
                    if (!item.parent){
                        that.cateLists.push(item)
                    }
                })
            })
        },
        itemChanged(val) {
            if (val.length === 1){
                this.params.category_one_level = val[0]
                this.params.category_two_level = null
            }else if (val.length === 2) {
                this.params.category_one_level = val[0]
                this.params.category_two_level = val[1]
            }
        },
        searchProducts(query) {
            if (query !== '') {
                listProduct({
                    search: query,
                    corp: this.params.corp
                }).then(res => {
                    this.searchGoods = res.data.data.good_list.filter(item => {
                        item.cateName = item.category_detail.name
                        item.disabled = false
                        return item
                    })

                    this.searchGoods.unshift({
                        name: '商品名称',
                        goods_no: '商品编号',
                        barcode: '条形码',
                        current_inventory_quantity: '商品库存',
                        id: 'table_header',
                        disabled: true
                    })
                })
            }
        },
        handleQuery() {
            this.pageParam.page = 1
            this.getProductLists()
        },
        getProductLists() {
            let params = Object.assign({}, this.params, this.pageParam)
            queryBatch(params).then(res => {
                this.productList = res.data.data.data_list.filter((item, index) => {
                    item.index = index+1
                    let goodInfo = item.goods_details
                    item.prod_name = goodInfo.name
                    item.goods_no = goodInfo.goods_no
                    item.unitName = goodInfo.unit_show?goodInfo.unit_show.name:''
                    item.stock = parseFloat(item.num)
                    return item
                })
                this.total = res.data.data.total
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
</style>